<template>
  <el-dialog @close="reset" :title="adminData.uid!==''?'编辑':'新增'" :visible.sync="info.isShow">
      <el-form ref="adminForm" label-width="70px" :model="adminData" :rules="rules">
          <el-form-item label="角色" prop="roleid">
              <el-select placeholder="请选择角色" v-model="adminData.roleid">
                  <el-option v-for="item in roleList" :key="item.id" :label="item.rolename" :value="item.id"></el-option>
              </el-select>
          </el-form-item>
           <el-form-item label="账号" prop='username'>
              <el-input :disabled="adminData.uid!==''" placeholder="请输入用户名" v-model="adminData.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
              <el-input type="password" placeholder="请输入密码" v-model="adminData.password"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="status">
              <el-radio-group v-model="adminData.status">
                  <el-radio :label="1">正常</el-radio>
                  <el-radio :label="2">禁用</el-radio>
              </el-radio-group>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button @click="reset">取消</el-button>
          <el-button type="primary" @click="submit">确认</el-button>
      </div>
  </el-dialog>
</template>

<script>
// 导入vuex辅助函数
import { mapState,mapActions } from 'vuex';
const defaultData={
    uid:'',
     // 角色id
    roleid:'',
    // 账号
    username:'',
    // 密码
    password:'',
    // 状态
    status:''
}
export default {
    created(){
        // 请求角色列表
        if(this.roleList.length===0){
            this.getRoleListAction();
        }
    },
    props:['info'],
    computed:{
        ...mapState('role',['roleList'])
    },
    methods:{
        ...mapActions('role',['getRoleListAction']),
        // 更新表单元素
        setFormData(obj){
            const {uid,roleid,username,password,status}=obj;
            this.adminData={uid,roleid,username,password,status};
            // 重置密码
            this.adminData.password='';
        },
        // 数据重置
        reset(){
             // 2-关闭对话框
             this.info.isShow=false;
            // 3-重置表单数据
            this.adminData={
                ...defaultData
            }
        },
        // 表单提交方法
        submit(){
            this.$refs.adminForm.validate(valid=>{
                if(valid){
                    // 发送数据请求
                    const url=this.adminData.uid!==''?'/useredit':'/useradd';
                    this.$axios.post(url,this.adminData).then(res=>{
                        if(res.code===200){
                            // 1-更新数据列表: 通知父组件重新发送数据请求
                            this.$emit('updateAdmin');
                            // 2-成功提示
                            this.$message.success(res.msg);
                            this.reset();
                        }else{
                            // 失败提示
                            this.$message.error(res.msg);
                        }
                    });
                }
            });
        }
    },
    data(){
        return {
            // 表单数据
            adminData:{
                ...defaultData
            },
            // 表单校验规则
            rules:{
                roleid:{required:true,message:'请选择角色',trigger:'blur'},
                username:{required:true,message:'请输入账号',trigger:'blur'},
                // password:{required:true,message:'请输入密码',trigger:'blur'},
                status:{required:true,message:'请选择状态',trigger:'blur'},
            }
        }
    }
}
</script>

<style>

</style>